<template>
	<view>
		<uni-nav-bar statusBar="true" :fixed="true" :border="false" backgroundColor="#eff3f7">
			<view class="index-top-nav-title">
				<!-- {{i18n.index}} -->
				<view class="left" @tap.stop="back">
					<uni-icon type="back" color="#ffffff" size="30"></uni-icon>
				</view>
				<view class="content">
					{{i18n.recharge}}
				</view>
				<view>
				</view>
			</view>
		</uni-nav-bar>
		<picker mode="selector" :value="index" range-key="title_en" :range="curList" @change="checkToken">
			<view class="head">
				<view class="item">
					<image :src="info.logo" mode="widthFix" lazy-load></image>
					<text>{{info.title_en}}</text>
				</view>
				<view class="item">
					<text>{{curList[index].title_en}}</text>
					<uni-icon type="arrowdown" color="#848484" size="15"></uni-icon>
				</view>
			</view>
		</picker>
		
		
		<view class="collection-con">
			<view class="collection-scan">
				<text>{{i18n.scan_to_pay_money}}</text>
				<image :src="imgUrl" mode="widthFix" lazy-load v-if="imgUrl"></image>
			</view>
			<view class="collection-address">
				<text>{{i118n.paymentAddress}}</text>
				<view class="address">
					{{info.address}}
				</view>
			</view>
			<view class="collection-btn" @tap.stop="copy">
				{{i18n.copy_address}}
			</view>
		</view>
		<view class="collection-tip">
			<view class="">
				{{i18n.rechareTips}}
			</view>
			<text>1. {{i18n.rechareTips01}}</text>
			<text>2. {{i18n.rechareTips02}}</text>
			<text>3. {{i18n.rechareTips03}}</text>
		</view>
		<load v-if="showLoad"></load>
	</view>
</template>
<script>
	import uniIcon from '@/components/uni-icon/uni-icon.vue';
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue';
	import Toast from '@/components/toast/toast.vue';
	import {mapGetters} from 'vuex';
	import {fetch, showToast, pageto, forceUpdate, check_login} from '@/common/js/util.js'
	export default {
		computed:  {
			i18n() {
				return this.$t('message');
			},
			...mapGetters([
				'getRequestUrl',
				"getLoginInfo",
				'getLangType',
				'getLang'
			])
		},
		components:{
			uniNavBar,uniIcon,Toast
		},
		data() {
			return {
				imgUrl:'',
				showLoad:false,
				isfast:false,
				info: {},
				curList:[]
			}
		},
		onLoad(e){
			if(e){
				this.info = JSON.parse(e.item)
				console.log(this.info);
				if(this.info.address){
					this.imgUrl = this.getRequestUrl+'/static/zhifu_img/'+this.info.address+'.png';
				}else{
					this.getAddress();
				}
				// http://coinchipsup.com/static/zhifu_img/0x70a53c3937ac8e2c6575aa8735cfbc0b4a7fc37c.png
			}
			this.getWall();
		},
		methods:{
			getAddress(){
				let _url = this.getRequestUrl+'/api/wallet/create_address';
				let data = {
					id:this.getLoginInfo.id,
					token:this.getLoginInfo.token,
					token_id:this.info.token_id
				}
				let result = fetch(_url, data, "POST");
				this.showLoad = true;
				result.then(res=>{
					// console.log(res);
					this.showLoad = false;
					if(res.data.code){
						// this.coinslist = res.data.data
						this.address = res.data.data.address;
						this.imgUrl = this.getRequestUrl+'/static/zhifu_img/'+res.data.data.address+'.png'
					}
				}).catch(err=>{
					this.showLoad = false;
					console.log(err)
				})
			},
			back(){
				uni.navigateBack({
					delta:1
				})
			},
			checkToken(e){
				let index = e.detail.value;
				this.info = this.curList[index];
				// this.imgUrl = this.getRequestUrl+'/static/zhifu_img/'+this.info.address+'.png';
				// this.getAddress();
				
				if(this.info.address){
					this.imgUrl = this.getRequestUrl+'/static/zhifu_img/'+this.info.address+'.png';
				}else{
					this.getAddress();
				}
				
				
			},
			getWall(){
				this.showLoad = true;
				let url = this.getRequestUrl + "/api/wallet/wallet_list";
				let data = {
					id:this.getLoginInfo.id,
					token:this.getLoginInfo.token
				}
				fetch(url,data,"POST").then(res=>{
					showToast(res.data.msg)
					this.showLoad = false;
					if(res.data.code){
						this.curList = res.data.data.list;
						
						this.curList.forEach((item,index)=>{
							this.curList[index].bala = ((parseInt(item.balance*100))/100).toFixed(2)
							this.curList[index].nce  =  ((parseInt( item.balance*1000000 - this.curList[index].bala*1000000)))
								if(this.curList[index].nce>=1000){
									this.curList[index].nce = this.curList[index].nce
								}else if(this.curList[index].nce>=100){
									this.curList[index].nce = this.curList[index].nce+'0'
								}else if(1000>this.curList[index].nce >=10){
									this.curList[index].nce = this.curList[index].nce+'00'
								}else if(100>this.curList[index].nce >=1){
									this.curList[index].nce = this.curList[index].nce+'000'
								}else{
									this.curList[index].nce = '0000'
								}
							this.curList[index].balance = parseFloat(item.balance).toFixed(4)
							this.curList[index].usd = parseFloat(item.usd).toFixed(4)
						})
						this.this.info = this.curList[0]
					}
					
				}).catch(err=>{
					this.showLoad = false;
				})
			},
			copy(){
				if (this.isfast) return;
				this.isfast = true;
				setTimeout(()=> {
					this.isfast = false;
				}, 1500)
				let _self = this;
				uni.setClipboardData({
					data: this.info.address,
					success: function () {
						if(_self.getLangType =='ja'){
							uni.showModal({
								title: 'コピー成功',
								content: 'コンテンツがクリップボードにコピーされ、他のアプリに貼り付けて表示することができます。', 
								showCancel:false,
								success: function(res) {
									if (res.confirm) {											 
										//console.log('用户点击确定');
									} else if (res.cancel) {
										//console.log('用户点击取消');
									}
								}
							});
						}else if(_self.getLangType =='ko'){
							uni.showModal({
								title: '성공적인 사본',
								content: '콘텐츠가 클립 보드에 복사되었으며 다른 앱에 붙여 넣어 볼 수 있습니다.', 
								showCancel:false,
								success: function(res) {
									if (res.confirm) {											 
										//console.log('用户点击确定');
									} else if (res.cancel) {
										//console.log('用户点击取消');
									}
								}
							});
						}else if(_self.getLangType =='en'){
							uni.showModal({
								title: 'Successful copy',
								content: 'The content has been copied to the clipboard and can be pasted to other apps for viewing', 
								showCancel:false,
								success: function(res) {
									if (res.confirm) {											 
										//console.log('用户点击确定');
									} else if (res.cancel) {
										//console.log('用户点击取消');
									}
								}
							});
						}else{
							uni.showModal({
								title: '复制成功',
								content: '内容已复制到粘贴板，可前往其他应用粘贴查看。', 
								showCancel:false,
								success: function(res) {
									if (res.confirm) {											 
										//console.log('用户点击确定');
									} else if (res.cancel) {
										//console.log('用户点击取消');
									}
								}
							});
						}
					}
				});
			},
		}
	}
</script>
<style>
	page{
		background: #f3f3f3;
	}
</style>
<style lang="scss" scoped>
	.index-top-nav-title{
		// padding-left: 30upx;
		width: 100%;
		background: linear-gradient(to right,#32B9FF,#1D7DFF);
		color: #FFFFFF;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.content{
			font-size: 37upx;
			text-align: center;
		}
	}
	.head{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 28upx 40upx 28upx 28upx;
		border-bottom: 20upx solid #D5DFEB;
		.item{
			display: flex;
			justify-content: space-between;
			align-items: center;
			text{
				font-size: 28upx;
				color: #848484;
				margin-right: 22upx;
			}
			&:first-child{
				image{
					width: 60upx;
					height: 60upx;
					border-radius: 30upx;
					margin-right: 16upx;
				}
				text{
					color: #000000;
				}
			}
		}
	}   
	
	.collection-con{
		background-color: #FFFFFF;
		padding: 66upx 28upx 45upx;
		.collection-scan{
			width: 200upx;
			margin: 0 auto;
			text{
				font-size: 24upx;
				color: #565656;
			}
			image{
				width: 200upx;
				height: 200upx;
			}
		}
		.collection-address{
			font-size: 28upx;
			color: #000000;
			margin:48upx 0 54upx;
		}
		.collection-btn{
			width: 620upx;
			margin: 0 auto;
			line-height: 66upx;
			text-align: center;
			border-radius: 10upx;
			background-color: #1D7DFF;
			color: #FFFFFF;
		}
	}
	.collection-tip{
		padding:43upx 28upx 0;
		view{
			font-size: 24upx;
			color: #000000;
		}
		text{
			color: #FF974A;
			font-size: 22upx;
			display: block;
			margin-top: 20upx;
		}
	}
</style>